<script setup>
import KOheader from '@/components/KOheader/KOheader.vue'
import KOfooter from '@/components/KOfooter/KOfooter.vue'
import { ref, watch, onMounted,computed } from "vue";
import { useRouter } from 'vue-router'
const router = useRouter()
const toSIGN=()=>{
  router.push({
    path: '/SIGN'
  })
}
const toUSER=()=>{
  // 存储一个标识到localStorage
  localStorage.setItem('userStatus', 'loggedIn');
  localStorage.setItem('excel', email.value);
  router.push({
    path: '/USER'
  })
}
const innerWidth = ref(false)
onMounted(() => {
  window.innerWidth < 1000 ? innerWidth.value = false : innerWidth.value = true
})
const handleResize = () => {
  window.innerWidth < 1000 ? innerWidth.value = false : innerWidth.value = true
};
watch(() => window.innerWidth, handleResize)

const email = ref('');
const password = ref('');

// 计算属性，用于判断表单是否填写完整
const isFormFilled = computed(() => email.value.trim() && password.value.trim());
</script>

<template>
  <div v-if="innerWidth">
    <KOheader/>
    <div style="margin: 50px auto; width: 400px;">
      <div style="font-size:25px;font-weight: 700;">歡迎回來！</div>
      <button style="display: flex; align-items: center; justify-content:space-between;  margin-top:20px ; border:1px solid #eeecec; border-radius: 10px; width: 100%; height: 40px;background-color: #fff;">
        <img style="width: 20px; height: 20px;" src="https://cdn.quickper.com/static/img/icons/fb_circle.png" alt="">
        <div>使用Facebook登入</div>
        <div></div>
      </button>
      <div style="margin-top:20px; text-align: center;">或</div>
      <div style="font-size:16px; font-weight: 700;margin-top:30px;">電子信箱登入</div>
      <div style="margin-top:30px;">
        <input v-model="email" style="border:none;border-bottom:1px solid #afadad; width: 100%; height: 40px;" type="text" placeholder="電子信箱地址">
      </div>
      <div style="margin-top:30px;">
        <input v-model="password" style="border:none;border-bottom:1px solid #afadad; width: 100%; height: 40px;" type="password" placeholder="密码">
      </div>
      <button @click="toUSER" :class="isFormFilled ? 'button-filled' : 'button-empty'" style="width: 100%; height: 35px; color:#fff; margin-top:30px; border:1px solid #d8d8d8;  border-radius:10px;">登入</button>
      <u style="margin-top:20px;display:block;">忘記您的密碼？</u>
      <u @click="toSIGN" style="margin-top:10px; display:block;">註冊新帳戶</u>
    </div>
    <KOfooter/>
  </div>
  <div v-else>
    <KOheader/>
    <div style="margin: 50px auto; width: 100%;">
      <div style="font-size:25px;font-weight: 700; margin-left: 20px;">歡迎回來！</div>
      <button style=" margin-left: 20px; display: flex; align-items: center; justify-content:space-between;  margin-top:20px ; border:1px solid #eeecec; border-radius: 10px; width: 90%; height: 40px;background-color: #fff;">
        <img style="width: 20px; height: 20px;" src="https://cdn.quickper.com/static/img/icons/fb_circle.png" alt="">
        <div>使用Facebook登入</div>
        <div></div>
      </button>
      <div style="margin-top:20px; text-align: center;">或</div>
      <div style="font-size:16px; font-weight: 700;margin-top:30px; margin-left: 20px;">電子信箱登入</div>
      <div style="margin-top:30px; margin-left: 20px;">
        <input style="border:none;border-bottom:1px solid #afadad; width: 90%; height: 40px;" type="text" placeholder="電子信箱地址">
      </div>
      <div style="margin-top:30px;margin-left: 20px;">
        <input style="border:none;border-bottom:1px solid #afadad; width: 90%; height: 40px;" type="password" placeholder="密码">
      </div>
      <button style="margin-left: 20px; width: 90%; height: 35px; color:#fff; margin-top:30px; border:1px solid #d8d8d8; background-color: #d8d8d8; border-radius:10px;">登入</button>
      <u style="margin-left: 20px; margin-top:20px;display:block;">忘記您的密碼？</u>
      <u @click="toSIGN" style="margin-left: 20px; margin-top:10px; display:block;">註冊新帳戶</u>
    </div>
    <KOfooter/>
  </div>
</template>

<style scoped>
  .button-filled {
  background-color: #000; /* 表单填写完整时的背景颜色 */
  color: #fff;
}

.button-empty {
  background-color: #d8d8d8; /* 表单未填写完整时的背景颜色 */
  color: #000;
}
</style>